import { Button } from 'antd';
import React from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import { deleteInvoice, getInvoice } from '../data';

export default function Invoice() {
	const navigate = useNavigate();
	const {num} = useParams<{num:string}>()
	const invoice = getInvoice(parseInt(num!,10))
	return (
		<main style={{ padding: "1rem" }}>
      <h2>Total Due: {invoice?.amount}</h2>
      <p>
        {invoice?.name}: {invoice?.number}
      </p>
      <p>Due Date: {invoice?.due}</p>
			<p>
				<Button
					danger
					type='primary'
					onClick={()=>{
						deleteInvoice(invoice?.number!)
						navigate('/invoices')
					}}
				>
					删除
				</Button>
			</p>
    </main>
	);
}
